<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>Todo</title>
		<link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>

	<body>
		<div id="demo">
			<h1 v-text="title"></h1>
			<input type="text" v-model="input" v-on:keyup.enter="add($index)" />
			<button v-on:click="add">Add</button>
			<button v-on:click="removeAll" class="ra">Remove All</button>
			<ul>
				<li v-for="list in mydata" class="{{list.checked}}">
					<input type="checkbox" v-text="list.checked" checked="{{list.checked}}" v-on:click="foo($index)" />
					<span v-text="list.text"></span>
					<button v-on:click="remove($index)" class="btn-r">remove</button>
				</li>
			</ul>
			
			<!--<p>finish items {{$data|json}}</p> <del>TODO is not to do</del>-->
		</div>
		<p>Click Enter to add a Todo
				<br />Written by <a href="https://git.oschina.net/fennie/Todo.git">Duobe</a></p>
		<script src="js/vue.js"></script>
		<script src="js/app.js"></script>
	</body>

</html>